<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        #menu {
            width: 150px;
        }

        #menu>h2 {
            margin: 0;
            padding: 10px;
            background-color: black;
            position: relative;
            display: flex;
        }

        #menu>ul {
            display: none;
        }

        #menu>h2>p {
            position: absolute;
            margin-left: 40px;
            margin-top: 6px;
        }

        #menu li {
            padding: 8px;
            background-color: #666;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
        }

        #menu li:hover {
            background-color: olivedrab;
        }
    </style>
</head>

<body>
    <div id="menu">
        <h2><img src="../img/u26.svg" style="width: 60px; height: 60px;"></h2>
        <h2>
            <img src="../img/u42.svg" alt="">
            <p>仪表盘</p>
        </h2>
        <ul>
            <li> <img src="../img/u101.svg" alt=""> <span> 项目看板</span></li>
            <li> <img src="../img/u101.svg" alt=""> <span> 工作台</span></li>
        </ul>
        <h2><img src="../img/u46.svg" alt="">
            <p>项目管理</p>
        </h2>
        <ul>
            <li><img src="../img/u101.svg" alt=""> <span> 项目信息登记</span></li>
            <li><img src="../img/u101.svg" alt=""><span> 项目信息审核</span></li>
            <li><img src="../img/u101.svg" alt=""><span> 项目信息列表</span></li>
            <li><img src="../img/u101.svg" alt=""><span> 项目信息维护</span></li>

        </ul>

        <h2><img src="../img/u66.svg" alt="">
            <p>合同管理</p>
        </h2>
        <ul>
            <li><img src="../img/u101.svg" alt=""><span> 合同信息登记</span></li>
            <li><img src="../img/u101.svg" alt=""><span> 合同信息审核</span></li>
            <li><img src="../img/u101.svg" alt=""><span> 合同信息列表</span></li>
        </ul>
        <h2><img src="../img/u83.svg" alt="">
            <p>资金管理</p>
        </h2>
        <ul>
            <li><img src="../img/u101.svg" alt=""><span> 资金支付申请</span></li>
            <li><img src="../img/u101.svg" alt=""><span> 资金支付审核</span></li>
            <li><img src="../img/u101.svg" alt=""><span> 资金支付确认</span></li>
        </ul>
        <h2><img src="../img/u104.svg" alt="">
            <p>其他</p>
        </h2>
        <ul>
            <li><img src="../img/u101.svg" alt=""><span> 文件管理</span></li>
            <li><img src="../img/u101.svg" alt=""><span> 日志管理</span></li>
        </ul>
    </div>
    </div>
    <script src="../js/jquery-3.6.4.js"></script>
    <script>
        $('#menu>h2').click(function () {
            //slide:滑动 带有动画
            //参数1：动画时长，单位毫秒 1000毫秒 = 1秒
            $(this).next().stop().slideToggle(1000)

            //动画队列设定：东湖呀未结束前 触发新的动画 ，会排队依次执行
            //
        })
    </script>
</body>

</html>